// Tâmia © 2013 Artem Sapegin http://sapegin.me
// Switcher
// Dependencies: form

// Bones

.switcher
	clearfix()
	no-select()

	&__label,
	&__input
		// For prehistoric browsers
		vertical-align: text-bottom
		padding-right: .5em
		font-size: 1em

	&__input:checked,
	&__input:not(:checked)
		position: absolute
		opacity: 0

	&__input:checked + &__label,
	&__input:not(:checked) + &__label
		position: relative
		float: left
		box-sizing: border-box
		vertical-align: top
		cursor: pointer
		z-index: 1
		margin-left: -1px
		user-select: none

	&__label:nth-of-type(1)
		margin-left: 0

	&__input:checked + &__label
		cursor: default
		z-index: 2

	&.is-disabled
		opacity: .4


// Default skin

modules_default_skin ?= true
switcher_default_skin ?= false

if modules_default_skin or switcher_default_skin
	.switcher
		&__input:checked + &__label,
		&__input:not(:checked) + &__label
			height: 2em
			padding: .5em 1em
			background: #f4f4f4
			background: linear-gradient(to bottom, #fefefe, #f4f4f4)
			border: 1px solid #bbb
			line-height: 1
			color: #555
			transition: border-color .1s ease-in-out, box-shadow .1s ease-in-out

		&__label:nth-of-type(1)
			border-radius: form_border_radius 0 0 form_border_radius
		&__label:nth-last-of-type(1)
			border-radius: 0 form_border_radius form_border_radius 0

		&__input:checked + &__label
			background: #ccc
			background: linear-gradient(to bottom, #bbb, #eee)
			border-color: #999
			box-shadow: inset 0 .1em .2em black(.2)
			text-shadow: 0 1px 0 black(.1)

		&__input:focus + &__label
			border-color: form_focus_color
			box-shadow: 0 0 .4em rgba(form_focus_color, .75)
